<template>
  <div class="detail">
    <div>
      <van-tabs v-model="active" color="#ff7340" swipeable @click="onClickTab">
        <van-tab title="订单信息"><tplDetail ref="tplDetails" :order-detail="orderDetail" @detailData="detailData"/></van-tab>
        <van-tab title="支付记录"><pay-record ref="payRecords" :order-detail="orderDetail"/></van-tab>
        <van-tab title="发货签收记录"/>
        <receive-record v-show="active === 2" ref="receiveRecords" :order-detail="orderDetail"/>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import tplDetail from './tplDetail'
import receiveRecord from './receiveRecord'
import payRecord from './payRecord'
export default {
  name: 'Index',
  components: {
    tplDetail,
    payRecord,
    receiveRecord
  },
  data() {
    return {
      active: 0,
      orderDetail: undefined
    }
  },
  mounted() {
    this.onClickTab(0)
    setTimeout(() => {
      this.whichType()
    }, 100)
  },
  methods: {
    whichType() {
      const route = this.$route.query
      if (route.type && route.type === 'receive') {
        this.active = 2
        this.onClickTab(2)
      }
    },
    onClickTab(index) {
      if (index === 0) {
        if (this.$refs.tplDetails) {
          this.$refs.tplDetails.GetOrderDetailFn()
        }
      }
      if (index === 1) {
        if (this.$refs.payRecords) {
          this.$refs.payRecords.getOrderGatheringListFn()
        }
      } else if (index === 2) {
        if (this.$refs.receiveRecords) {
          this.$refs.receiveRecords.getShipingItemFn()
        }
      }
    },
    detailData(val) {
      this.orderDetail = val
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
</style>
